<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p></p>
    <script>
        /**
         * 方法名：ajax
         * 参数1：路径
         * 参数2：数据
         * 参数3：回调函数
         * */ 
        // 1. 将上面文件进行优化
            // 2. 将get、post 请求方式分为2个不同的函数 

             // 封装函数
        // function ajax(url,data,cb){
        //     let x = new XMLHttpRequest();
        //     //{c:"e",age:18} => c=e&age=18
        //     //Object.keys(data) =  [c,age]
        //     let str = Object.keys(data).map(item=>`${item}=${data[item]}`).join('&');
        //     console.log(str);
        //     x.open('POST',url);
        //     x.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //     x.send(str);
        //     x.responseType = 'json';
        //     x.onreadystatechange = function(){
        //         if(x.readyState === 4 && x.status>=200 && x.status<300){
        //             cb(x.response)
        //         }
        //     }
        // }


        // 如何使用
        // ajax('http://localhost/postServer',{c:"e",age:18},(data)=>{
        //     console.log(data);

        //     document.querySelector('p').innerHTML = data.msg;

        // });

        // let obj = {name:"xiaoli",age:18};

        // let name = "name";

        // // console.log(obj.name);
        // // console.log(obj["name"]);

        // console.log(obj["name"]);


        // console.log(Object.keys(obj));
        const ajax = {
            get:function ajax(url,data,cb){
                let x = new XMLHttpRequest();
                let str = Object.keys(data).map(item=>`${item}=${data[item]}`).join('&');
                x.open('GET',url+'?'+str);
                x.send();
                x.responseType = 'json';
                x.onreadystatechange = function(){
                    if(x.readyState === 4 && x.status>=200 && x.status<300){
                        cb(x.response)
                    }
                }
            },
            post:function ajax(url,data,cb){
                let x = new XMLHttpRequest();
                let str = Object.keys(data).map(item=>`${item}=${data[item]}`).join('&');
                x.open('POST',url);
                x.setRequestHeader('content-type','application/x-www-form-urlencoded');
                x.send(str);
                x.responseType = 'json';
                x.onreadystatechange = function(){
                    if(x.readyState === 4 && x.status>=200 && x.status<300){
                        cb(x.response)
                    }
                }
            }
        }

        // get请求
        ajax.get('http://localhost/getServer',{username:"xiaowang",age:18},(data)=>{
            console.log(data);
        });

        // post请求
        ajax.post('http://localhost/postServer',{username:"xiaowang",age:18},(data)=>{
            console.log(data);
        });
        
    </script>
</body>

</html>